import React, { useEffect } from 'react';
import G6, { TreeGraph, Graph } from '../../../src';
import { IGraph } from '../../../src/interface/graph';

let graph: IGraph = null;

const data2 = {
  nodes: [
    {
      id: 'node1',
      // x: -200,
      // y: -200,
      x: 50,
      y: 50,
      label: 'node1',
    },
    {
      id: 'node2',
      // x: 200,
      // y: -200,
      x: 100,
      y: 50,
      label: 'node2',
    },
    {
      id: 'node3',
      // x: -200,
      // y: 200,
      x: 50,
      y: 100,
      label: 'node3',
    },
    {
      id: 'node4',
      x: 100,
      y: 100,
      label: 'node4',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
    {
      source: 'node2',
      target: 'node3',
    },
  ],
};

const ImgMinimap = () => {
  const container = React.useRef();
  useEffect(() => {
    if (!graph) {
      const minimap = new G6.ImageMinimap({
        width: 200,
        padding: 10,
        graphImg:
          'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DcGMQ7AN3Z0AAAAAAAAAAABkARQnAQ',
        //https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7QSRRJwAWxQAAAAAAAAAAABkARQnAQ
        //https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DcGMQ7AN3Z0AAAAAAAAAAABkARQnAQ
      });
      fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
        .then((res) => res.json())
        .then((data) => {
          graph = new TreeGraph({
            container: container.current as string | HTMLElement,
            width: 600,
            height: 400,
            plugins: [minimap],
            modes: {
              default: [
                {
                  type: 'collapse-expand',
                  onChange: function onChange(item, collapsed) {
                    const data = item.get('model').data;
                    data.collapsed = collapsed;
                    return true;
                  },
                },
                'drag-canvas',
                'zoom-canvas',
              ],
            },
            defaultNode: {
              size: 26,
              anchorPoints: [
                [0, 0.5],
                [1, 0.5],
              ],
              style: {
                fill: '#C6E5FF',
                stroke: '#5B8FF9',
              },
            },
            defaultEdge: {
              type: 'cubic-horizontal',
              style: {
                stroke: '#A3B1BF',
              },
            },
            layout: {
              type: 'dendrogram',
              direction: 'LR', // H / V / LR / RL / TB / BT
              nodeSep: 30,
              rankSep: 100,
            },
          });

          graph.node(function (node) {
            return {
              label: node.id,
              labelCfg: {
                position: node.children && node.children.length > 0 ? 'left' : 'right',
                offset: 5,
              },
            };
          });

          graph.data(data);
          graph.render();
          // graph.fitView();

          graph.on('canvas:click', () => {
            minimap.updateGraphImg(
              'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7QSRRJwAWxQAAAAAAAAAAABkARQnAQ',
            );
          });
        });
    }
  });
  return <div ref={container}></div>;
};

export default ImgMinimap;

// base64
// 
